<template>
  <div class="search_bar" :class="{ search_move: inputStatus }">
    <div class="search_box">
      <input
        @focus="inputStatus = true"
        @blur="inputStatus = false"
        v-model="searchStore.option.animeTitleOrOtherTitle"
        type="text"
        placeholder="请输入搜索关键字..."
        @keydown.enter="searchStore.getSearchData()"
      />
      <div class="icon">
        <span
          @click="searchStore.option.animeTitleOrOtherTitle = ''"
          v-if="
            (inputStatus && searchStore.option.animeTitleOrOtherTitle.length > 0) ||
            searchStore.option.animeTitleOrOtherTitle.length > 0
          "
          class="iconfont icon-qingchu"
        ></span>
        <span v-else class="iconfont icon-iconsousuo"></span>
      </div>
    </div>
    <span
      @click="searchStore.isFliterActive = !searchStore.isFliterActive"
      :class="{ is_active_list: searchStore.isFliterActive }"
      class="iconfont icon-shaixuan"
    ></span>
  </div>
</template>

<script>
import { ref } from 'vue'

import { useSearchStore } from '@/stores/search'

export default {
  name: 'SearchBar',
  setup() {
    const inputStatus = ref(false)
    const searchStore = useSearchStore()
    searchStore.getSearchData()

    return {
      inputStatus,
      searchStore
    }
  }
}
</script>

<style lang="scss" scoped>
.search_bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  transition: all 0.625s;
  .icon-shaixuan {
    cursor: pointer;
    color: $font;
    font-size: 26px;
    transition: all 0.25s;
    &:hover {
      transition: all 0.25s;
      color: $primary;
    }
  }
  .is_active_list {
    transition: all 0.25s;
    color: $primary;
  }
}
.search_box {
  position: relative;
  display: flex;
  width: 26%;
  height: 48px;
  background-color: $box_bg;
  border-radius: 12px;
  transition: all 0.25s;
  input {
    flex: 1;
    height: 100%;
    text-indent: 20px;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border: 0 solid;
    color: $font;
    font-size: 14px;
    &::-webkit-input-placeholder {
      color: $font_unactive;
      font-size: 14px;
    }
  }
  .icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      cursor: pointer;
      margin: 0 16px;
      color: $font;
      font-size: 20px;
      transition: all 0.25s;
      &:hover {
        transition: all 0.25s;
        color: $font_unactive;
      }
    }
  }
}
.search_move {
  transition: all 0.5s;
  transform: translate(30%, 100%);
  .search_box {
    width: 40%;
    transition: all 0.25s;
  }
}
</style>
